<template>
  <div>
    <!-- 查询人员 -->
    <div class="search box" style="margin-bottom: 20px">
      <el-form :inline="true">
        <el-form-item label="人员搜索：">
          <el-input
            clearable
            placeholder="请输入"
            v-model="userName"
          ></el-input>
        </el-form-item>
        <el-form-item label="角色：">
          <el-select clearable v-model="isRepair" placeholder="请选择">
            <el-option
              v-for="item in roleList"
              :key="item.roleId"
              :label="item.roleName"
              :value="item.roleId"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="btn" @click="search"
            ><i class="el-icon-search"></i>查询</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格结构 -->
    <div class="result box">
      <div class="resTable">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column
            width="80"
            type="index"
            :index="indexMethod"
            label="序号"
          ></el-table-column>
          <el-table-column
            width="175"
            prop="userName"
            label="人员名称"
          ></el-table-column>
          <el-table-column width="175" prop="roleName" label="角色">
          </el-table-column>
          <el-table-column width="175" prop="mobile" label="联系电话">
          </el-table-column>
          <el-table-column
            width="175"
            prop="workCount"
            label="完成工单(本月)"
          ></el-table-column>
          <el-table-column
            width="175"
            prop="progressTotal"
            label="进行中工单(本月)"
          ></el-table-column>
          <el-table-column
            width="175"
            prop="cancelCount"
            label="拒绝单(本月)"
          ></el-table-column>
          <el-table-column label="操作">
            <template v-slot="{ row }">
              <el-link
                :underline="false"
                type="primary"
                @click="detailFn(row.userId)"
                >查看详情</el-link
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="resPage">
        <span
          >共{{ totalCount }}条记录 第{{ pageInfo.pageIndex }}/{{
            totalPage
          }}页</span
        >
        <el-button-group>
          <el-button
            :disabled="pageInfo.pageIndex === 1"
            @click="changePage(-1)"
            >上一页</el-button
          >
          <el-button
            :disabled="pageInfo.pageIndex === Number(totalPage)"
            @click="changePage(1)"
            >下一页</el-button
          >
        </el-button-group>
      </div>
    </div>
    <!-- 修改详情对话框 -->
    <el-dialog
      title="人员详情"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
      width="630px"
    >
      <div class="detailBody">
        <div class="info" style="margin-bottom: 26px">
          <el-row>
            <el-col :span="9"
              ><div>人员名称：{{ detailInfo.userName }}</div></el-col
            >
            <el-col :span="7"
              ><div>角色：{{ detailInfo.roleName }}</div></el-col
            >
            <el-col :span="8"
              ><div>联系电话：{{ detailInfo.mobile }}</div></el-col
            >
          </el-row>
          <el-row style="margin-top: 15px">
            <el-col :span="24"
              ><div>负责区域：{{ detailInfo.regionName }}</div></el-col
            >
          </el-row>
        </div>
        <div class="table">
          <el-table
            :data="detailInfo.dialogData"
            border
            style="width: 100%"
            :header-cell-style="{ 'text-align': 'center' }"
            :cell-style="{ 'text-align': 'center' }"
          >
            <el-table-column
              width="120px"
              type="index"
              :index="timeIndex"
            ></el-table-column>
            <el-table-column
              width="117px"
              prop="total"
              label="总共单数"
            ></el-table-column>
            <el-table-column
              width="117px"
              prop="cancelCount"
              label="拒绝工单"
            ></el-table-column>
            <el-table-column width="117px" prop="workCount" label="完成工单">
            </el-table-column>
            <el-table-column
              width="117px"
              prop="progressTotal"
              label="进行中工单"
            >
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import {
  getUserWorkList,
  getRoleList,
  getUserInfo,
  getUserWork
} from '@/api/person'
export default {
  data () {
    return {
      tableData: [],
      pageInfo: {
        pageIndex: 1,
        pageSize: 10
      },
      totalCount: '',
      totalPage: '',
      userName: '',
      isRepair: '',
      roleList: [],
      dialogVisible: false,
      detailInfo: {
        userName: '',
        roleName: '',
        mobile: '',
        regionName: '',
        dialogData: []
      },
      duration: ['本周', '本月', '本年']
    }
  },
  async created () {
    // 初始化工作量表格数据
    this.getUserWorkList(this.pageInfo)
    // 获取角色列表
    const res = await getRoleList()
    this.roleList = res.map((item) => {
      const obj = {}
      obj.roleName = item.roleName
      obj.roleId = item.roleId === 3
      return obj
    })
  },
  methods: {
    // 表格序号加工——页码
    indexMethod (index) {
      return this.pageInfo.pageSize * (this.pageInfo.pageIndex - 1) + index + 1
    },
    // 表格序号加工——时间周期
    timeIndex (index) {
      return this.duration[index]
    },
    // 获取表格工作量列表
    async getUserWorkList (data) {
      const res = await getUserWorkList(data)
      this.tableData = res.currentPageRecords
      this.totalCount = res.totalCount
      this.totalPage = res.totalPage
    },
    // 页码切换
    changePage (num) {
      this.pageInfo.pageIndex += num
      this.getUserWorkList(this.pageInfo)
    },
    // 查询事件
    search () {
      this.pageInfo = {
        pageIndex: 1,
        pageSize: 10
      }
      // 判断查询内容
      // console.log('没名字没角色')
      if (!this.userName && !(typeof this.isRepair === 'boolean')) {
        this.getUserWorkList({ ...this.pageInfo })
      }
      // console.log('有名字没角色')
      if (this.userName && !(typeof this.isRepair === 'boolean')) {
        this.getUserWorkList({ ...this.pageInfo, userName: this.userName })
      }
      // console.log('没名字有角色')
      if (!this.userName && typeof this.isRepair === 'boolean') {
        this.getUserWorkList({ ...this.pageInfo, isRepair: this.isRepair })
      }
      // console.log('有名字有角色')
      if (this.userName && typeof this.isRepair === 'boolean') {
        this.getUserWorkList({
          ...this.pageInfo,
          userName: this.userName,
          isRepair: this.isRepair
        })
      }
    },
    // 查看详情
    async detailFn (id) {
      this.dialogVisible = true
      // 获得基本信息
      const res = await getUserInfo(id)
      this.detailInfo.userName = res.userName
      this.detailInfo.roleName = res.roleName
      this.detailInfo.mobile = res.mobile
      this.detailInfo.regionName = res.regionName
      // 获得工单量
      const week = await getUserWork(id, this.weekStart, this.todayEnd)
      this.detailInfo.dialogData.push(week)
      const month = await getUserWork(id, this.monthStart, this.todayEnd)
      this.detailInfo.dialogData.push(month)
      const year = await getUserWork(id, this.yearStart, this.todayEnd)
      this.detailInfo.dialogData.push(year)
    },
    // 关闭对话框之前
    handleClose () {
      // 只会针对点击x时，beforeclose才生效  清空
      this.detailInfo = {
        userName: '',
        roleName: '',
        mobile: '',
        regionName: '',
        dialogData: []
      }
      // 让变量为false 就会触发关闭不显示
      this.dialogVisible = false
    }
  },
  computed: {
    todayEnd () {
      return dayjs().endOf('date').format('YYYY-MM-DD HH:mm:ss')
    }, // 2022-11-24 23:59:59}
    monthStart () {
      return dayjs().startOf('month').format('YYYY-MM-DD HH:mm:ss')
    },
    yearStart () {
      return dayjs().startOf('year').format('YYYY-MM-DD HH:mm:ss')
    },
    weekStart () {
      return dayjs()
        .startOf('week')
        .add(1, 'day')
        .format('YYYY-MM-DD HH:mm:ss')
    }
  }
}
</script>

<style scoped lang="scss">
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.box {
  width: 100%;
  background-color: #fff;
}
.btn {
  align-items: center;
  width: 80px !important;
  height: 36px;
  padding: 0;
  background: linear-gradient(135deg, #ff9743, #ff5e20);
  border: none;
}
.search {
  height: 64px;
  padding-left: 17px;
  .el-form {
    height: 100%;
    padding: 0;
    .el-form-item {
      margin: 10px 10px 0 0;
      ::v-deep .el-form-item__label {
        height: 36px;
      }
      ::v-deep .el-input__inner {
        height: 36px;
      }
      .el-button {
        background: #5f84ff !important;
      }
    }
  }
}
.result {
  padding: 20px 15px 19px 17px;
  display: flex;
  flex-direction: column;
  .resTable {
    ::v-deep th {
      background-color: rgb(243, 246, 251);
      color: #666;
      font-size: 14px;
      font-weight: normal;
    }
    ::v-deep .el-table__cell {
      height: 44px;
      padding: 0;
      border: 0;
    }
    .el-table td.el-table__cell,
    .el-table th.el-table__cell.is-leaf {
      border: 0px;
    }
    .el-link {
      margin-right: 20px;
    }
  }
  .resPage {
    display: flex;
    justify-content: space-between;
    margin: 32px 16px;
    span {
      font-size: 16px;
      color: #dbdfe5;
    }
    .el-button {
      width: 70px;
      height: 32px;
      line-height: 32px;
      padding: 0;
      margin: 0 16px;
      border-radius: 2px;
      background-color: #d5ddf8;
      font-size: 13px;
    }
  }
}
::v-deep .el-dialog {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgb(0 0 0 / 30%);
  .el-dialog__header {
    height: 52px;
    box-sizing: border-box;
  }
  .detailBody {
    .info {
      height: 86px;
      padding: 19px 19px 0;
      background: #f3f6fb;
      div {
        color: #666;
        font-size: 14px;
      }
    }
  }
}
</style>
